<template>
	<view class="container">
		<!-- #ifdef H5 -->
		<uni-header></uni-header>
		<!-- #endif -->

		<view class="shop-box com-box">

			<view class="shop-info">
				<view class="s-shop">
					<image :src="info.sellerInfo.logoPic ? info.sellerInfo.logoPic : '/static/missing-face.png'" mode="scaleToFill"></image>
					<view class="info">
						<text>{{info.sellerInfo.sellerName}}</text>
						<text>出售：{{info.salesSum}}件</text>
					</view>
					<!-- <button class="action-btn default sp" type="primary">分享店铺</button> -->
				</view>
				<view class="s-detail">
					<view class="sub">
						<text class="ttl">商品数量</text>
						<text>{{info.totalCount}}件商品</text>
					</view>
					<view class="sub">
						<text class="ttl">今日成交</text>
						<text>{{info.todayNum}}次</text>
					</view>
					<view class="sub">
						<text class="ttl">上新</text>
						<text>{{info.newUp}}件商品</text>
					</view>
				</view>
			</view>
			<view class="navbar" style="position: relative; top: auto;">
				<view class="nav-item" :class="{current: filterIndex === 0}" @click="tabClick(0)">
					销量优先
				</view>
				<view class="nav-item" :class="{current: filterIndex === 1}" @click="tabClick(1)">
					<text>价格</text>
					<view class="p-box">
						<text :class="{active: priceOrder === 1 && filterIndex === 1}" class="icon icon-arrow_up"></text>
						<text :class="{active: priceOrder === 2 && filterIndex === 1}" class="icon icon-arrow_down"></text>
					</view>
				</view>
			</view>

			<view class="goods-list">
				<view v-for="(item, index) in goodsList" :key="index" class="goods-item" @click="navToDetailPage(item)">
					<view class="image-wrapper">
						<image :src="item.img" mode="aspectFill" lazy-load></image>
					</view>
					<view class="text-wrapper">
						<text class="title clamp2">{{item.goodsName}}</text>
						<text class="size">{{item.specification}}</text>
						<view class="shop clamp">
							<image :src="item.goodsPicList[0]" mode="aspectFill"></image>
							{{info.sellerInfo.sellerName}}
						</view>
					</view>
				</view>
			</view>
			<!-- #ifdef H5 -->
			<uni-pagination :num='pageNum' :page='pages' @pagechange="pagechange"></uni-pagination>
			<!-- #endif -->
			<uni-load-more class="sp" :status="loadingType"></uni-load-more>
		</view>

		<!-- #ifdef H5 -->
		<uni-footer></uni-footer>
		<!-- #endif -->

	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more.vue'
	import uniHeader from '@/components/h5/uni-header.vue'
	import uniFooter from '@/components/h5/uni-footer.vue'
	import uniPagination from '@/components/h5/uni-pagination.vue'
	export default {
		components: {
			uniLoadMore,
			uniHeader,
			uniFooter,
			uniPagination
		},
		data() {
			return {
				id: '',
				goodsList: [],
				info: {},
				pageNum: 1,
				pageSize: 10,
				pages: 0
			}
		},
		onLoad(option) {
			this.id = option.id
			this.loadData()
		},
		//加载更多
		onReachBottom() {
			this.loadData()
		},
		onShareAppMessage() {
			return {
				title: '店铺分享-' + this.info.sellerInfo.sellerName,
				imageUrl: 'https://easycampus-asset.oss-cn-shenzhen.aliyuncs.com/sharebg.png',
				path: '/pages/shop/shop?id=' + this.id
			}
		},
		methods: {
			pagechange(currentPage) {
				console.log(currentPage)
				// ajax请求, 向后台发送 currentPage, 来获取对应的数据
				uni.showLoading({
					title: '正在加载'
				})
				this.pageNum = currentPage
				this.loadData('current')
			},
			//加载商品 ，带下拉刷新和上滑加载
			loadData(type = 'add') {
				//没有更多直接返回
				if (type === 'add') {
					if (this.loadingType === 'nomore') {
						return
					}
					this.loadingType = 'loading'
				} else {
					this.loadingType = 'more'
				}
				let orderByInfo = {}
				if (this.filterIndex === 0) {
					//销量排序
					orderByInfo = {
						salesNum: 1
					}
				}
				if (this.filterIndex === 1) {
					//价格排序 需要从新获取Page
					orderByInfo = {
						priceSort: this.priceOrder === 1 ? 1 : 2
					}
				}
				if (type === 'refresh') {
					this.pageNo = 1
				}
				this.$api.request('/indexs/store', {
					sellerId: this.id,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					...orderByInfo
				}, {
					method: 'GET'
				}).then(res => {
					let tempList = res.data.page.records
					this.info = res.data
					if (type !== 'add') {
						this.goodsList = []
					}
					this.pages = Math.ceil(res.data.page.total / this.pageSize)
					this.loadingType = this.pageNum < this.pages ? 'more' : 'nomore'
					this.goodsList = this.goodsList.concat(tempList)
					this.pageNum = this.pageNum + 1
					if (type !== 'add') {
						uni.hideLoading()
						uni.stopPullDownRefresh()
					}
				})
			},
			//筛选点击
			tabClick(index) {
				if (this.filterIndex === index && index !== 1) {
					return
				}
				this.filterIndex = index
				if (index === 1) {
					this.priceOrder = this.priceOrder === 1 ? 2 : 1
				} else {
					this.priceOrder = 0
				}
				uni.pageScrollTo({
					duration: 300,
					scrollTop: 0
				})
				this.loadData('refresh', 1)
				uni.showLoading({
					title: '正在加载'
				})
			},
			//详情
			navToDetailPage(item) {
				//测试数据没有写id，用title代替
				let id = item.id
				uni.navigateTo({
					url: `/pages/product/detail?id=${id}`
				})
			}
		},
	}
</script>

<style lang="scss">
	.navbar {
		margin-bottom: 20upx;
	}

	.shop-info {
		line-height: 50upx;

		.s-shop {
			display: flex;
			align-items: center;
			padding: 20upx $base-row-spacing;
			line-height: 50upx;

			image {
				display: block;
				margin-right: 20upx;
				width: 100upx;
				height: 100upx;
			}

			text {
				display: block;
				font-size: $base-font-base;

				&:nth-child(2) {
					font-size: $base-font-sm;
				}
			}

			.action-btn {
				margin-left: auto;
				width: 160upx;
				min-width: 160upx;
				height: 30px;
				font-size: $base-font-sm;
				line-height: 30px;
				border-radius: 8upx;
				color: $base-color-page;
			}
		}

		.s-detail {
			display: flex;
			justify-content: space-between;
			margin: 0 $base-row-spacing 20upx;
			padding: 20upx;
			text-align: center;
			background-color: #fff;
			border-radius: 20upx;
			// box-shadow: 0px 11upx 6upx 0 rgba(2, 81, 244, 0.33);

			.sub {
				width: 30%;
			}

			text {
				font-size: $base-font-base;
			}

			.ttl {
				display: block;
				color: $base-color-page;
				font-size: $base-font-base;
			}
		}
	}

	/* #ifdef H5 */
	@media screen and (min-width: 750px) {
		.container {
			padding-top: 0;
		}

		.shop-box {
			margin: 20px auto;
			background-color: #fff;
		}

		.navbar {
			background-color: #fff;
			border-bottom: 1px solid $base-color-light;
		}

		.navbar {
			margin-bottom: 20px;
		}

		.shop-info {
			line-height: 50px;

			.s-shop {
				display: flex;
				align-items: center;
				padding: 20px 30px;
				line-height: 50px;
				border-bottom: 1px solid $base-color-light;

				.info {
					display: flex;
					justify-content: space-between;
					flex-grow: 1;
				}

				image {
					display: block;
					margin-right: 20px;
					width: 50px;
					height: 50px;
				}

				text {
					font-size: 24px;

					&:nth-child(2) {
						font-size: 16px;
					}
				}

				.action-btn {
					display: none;
				}
			}

			.s-detail {
				margin: 0;
				padding: 10px 20px;
				line-height: 30px;
				border-radius: 0;
				border-bottom: 20px solid $base-color-bg;
				// box-shadow: 0px 11upx 6upx 0 rgba(2, 81, 244, 0.33);

				.sub {
					width: 30%;
				}

				text {
					font-size: 16px;
				}

				.ttl {
					font-size: 16px;
				}
			}
		}


	}

	/* #endif */
</style>
